<template>
  <div>
  <van-card
    tag="公告"
    title="小区公告"
    :thumb="require('../../assets/img/intelligenceDistrict.png')"
  >
  <div slot="tags">
    <p>近期本小区将升级为智慧社区，进出小区将扫脸认证。</p>
    <p>请选择您方便的时间，工作人员将上门为您录入信息。</p>
  </div>
  </van-card>
  <van-form @submit="onSubmit">
    <van-field
      v-model="firstName"
      name="firstName"
      label="您贵姓"
      placeholder=""
      :rules="[{ required: true, message: '请填写您的姓' }]"
    />
    <van-field 
    name="gender" 
    label="您的称呼是">
      <template #input>
        <van-radio-group v-model="gender" direction="horizontal">
          <van-radio name="先生">先生</van-radio>
          <van-radio name="女士">女士</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field
      readonly
      clickable
      name="buildingPicker"
      :value="building"
      label="您居住的栋号"
      placeholder="请选择您居住的栋号"
      :rules="[{ required: true, message: '请选择楼栋号' }]"
      @click="showBulidingPicker = true"
    />
    <van-popup v-model="showBulidingPicker"  position="bottom">
      <van-picker
        show-toolbar
        :columns="bulidings"
        @confirm="onBulidingConfirm"
        @cancel="showBulidingPicker = false"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      name="unitPicker"
      :value="unit"
      label="单元号"
      placeholder="请选择单元号"
      :rules="[{ required: true, message: '请选择单元号' }]"
      @click="showUnitPicker = true"
    />
    <van-popup v-model="showUnitPicker"  position="bottom">
      <van-picker
        show-toolbar
        :columns="units"
        @confirm="onUnitConfirm"
        @cancel="showUnitPicker = false"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      name="floorPicker"
      :value="floor"
      label="楼层"
      placeholder="请选择楼层"
      :rules="[{ required: true, message: '请选择楼层' }]"
      @click="showFloorPicker = true"
    />
    <van-popup v-model="showFloorPicker"  position="bottom">
      <van-picker
        show-toolbar
        :columns="floors"
        @confirm="onFloorConfirm"
        @cancel="showFloorPicker = false"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      name="roomPicker"
      :value="room"
      label="房间号"
      placeholder="请选择房间号"
      :rules="[{ required: true, message: '请选择房间号' }]"
      @click="showRoomPicker = true"
    />
    <van-popup v-model="showRoomPicker"  position="bottom">
      <van-picker
        show-toolbar
        :columns="rooms"
        @confirm="onRoomConfirm"
        @cancel="showRoomPicker = false"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      name="datePicker"
      :value="datetime"
      label="你方便上门的日期"
      placeholder="点击选择时间"
      :rules="[{ required: true, message: '请选择预约时间' }]"
      @click="showDatePicker = true"
    />
    <van-popup v-model="showDatePicker" position="bottom">
      <van-datetime-picker
        type="datehour"
        :min-date = "minDate"
        :max-date = "maxDate"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
      />
    </van-popup>
    <van-field
      v-model="telephone"
      name="telephone"
      label="你的联系电话"
      placeholder=""
      :rules="[{ required: true, message: '请填写联系电话' }]"
    />
    <div style="margin: 16px;">
      <van-button  block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</div>
</template>

<script>
  import xxxx from '@/assets/data/district.json'
  import axios from 'axios'
  export default {
    name:'Form',
    data() {
      return {
        firstName: '',
        gender:'先生',
        district:xxxx,
        building:'',
        bulidings: ["一栋", "二栋", "三栋", "四栋", "五栋", "六栋", "七栋", "八栋", "九栋"],
        unit: '',
        units: [],
        floor:'',
        floors:[],
        room:'',
        rooms:[],
        telephone:'',
        datetime:'',
        showBulidingPicker: false,
        showUnitPicker: false,
        showFloorPicker:false,
        showRoomPicker:false,
        showDatePicker:false,
        minDate: new Date(),
        maxDate: new Date(2022,7,31),
      };
    },
    methods: {
      onSubmit(values) {
        const payLoad = {}
        payLoad.district = '锦林花园'
        payLoad.firstName = values.firstName
        payLoad.gender = values.gender
        payLoad.building = values.buildingPicker
        payLoad.unit = values.unitPicker
        payLoad.floor = values.floorPicker
        payLoad.room = values.roomPicker
        payLoad.subscribeDate = values.datePicker
        payLoad.telephone = values.telephone
        // console.log("payLoad")
        // console.log(payLoad)
        axios
        .post('/subscribe/',payLoad
        )
        .then((res) =>{
          if(res.data.code===201){
            this.$router.push('/thanks')
          }else if(res.data.code===500){
            this.$message({
              message: '数据库错误！',
              type: 'error'
            })
          }
        })
        .catch((error)=>{
          console.log(error);
        })
      },
      onBulidingConfirm(value) {
        this.building = value;
        this.showBulidingPicker = false;
      },
      onUnitConfirm(value) {
        this.unit = value;
        this.showUnitPicker = false;
      },
      onFloorConfirm(value) {
        this.floor = value;
        this.showFloorPicker = false;
      },
      onRoomConfirm(value) {
        this.room = value;
        this.showRoomPicker = false;
      },
      onDateConfirm(value) {
        this.datetime = this.timeFormat(value);
        this.showDatePicker = false;
      },
      timeFormat(time) { // 时间格式化 2019-09-08
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let day = time.getDate();
        let hour = time.getHours(); 
        return year + '年' + month + '月' + day + '日' + ' ' + hour + '点'
      },
    },
    watch:{
      building:{
        handler(newName,oldName){
          this.units = Object.keys(this.district[this.building])
        },
        immediate: true,
      },
      unit:{
        handler(newName,oldName){
          this.floors = Object.keys(this.district[this.building][this.unit])
        },
        immediate: true,
      },
      floor:{
        handler(newName,oldName){
          this.rooms = this.district[this.building][this.unit][this.floor]
        },
        immediate: true,
      },
    },
    mounted(){
    },
  };
</script>

<style>
</style>